@import '../../mixins'

.Tab
  box(relative, flex)
  width: 100%
  height: var(--tabs-height)
  align-items: center
  z-index: 10
  border: var(--tabs-border)
  box-shadow: var(--tabs-shadow)
  transform-origin: 50% 0%
  transition: transform var(--d-fast), opacity var(--d-fast), padding var(--d-fast)

  &:hover
    background-color: var(--tabs-bg-hover)

  &:active
  &[data-active]:active
    background-color: var(--tabs-bg-active)

  &[data-lvl="0"]
    padding-left: 0
  &[data-lvl="1"]
    padding-left: var(--tabs-indent)
  &[data-lvl="2"]
    padding-left: calc(var(--tabs-indent) * 2)
  &[data-lvl="3"]
    padding-left: calc(var(--tabs-indent) * 3)
  &[data-lvl="4"]
    padding-left: calc(var(--tabs-indent) * 4)
  &[data-lvl="5"]
    padding-left: calc(var(--tabs-indent) * 5)
  &[data-lvl="6"]
    padding-left: calc(var(--tabs-indent) * 6)
  &[data-lvl="7"]
    padding-left: calc(var(--tabs-indent) * 7)
  &[data-lvl="8"]
    padding-left: calc(var(--tabs-indent) * 8)
  &[data-lvl="9"]
    padding-left: calc(var(--tabs-indent) * 9)
  &[data-lvl="10"]
    padding-left: calc(var(--tabs-indent) * 10)
  &[data-lvl="11"]
    padding-left: calc(var(--tabs-indent) * 11)
  &[data-lvl="12"]
    padding-left: calc(var(--tabs-indent) * 12)
  &[data-lvl="13"]
    padding-left: calc(var(--tabs-indent) * 13)
  &[data-lvl="14"]
    padding-left: calc(var(--tabs-indent) * 14)
  &[data-lvl="15"]
    padding-left: calc(var(--tabs-indent) * 15)
  
  padding-left: calc(var(--tabs-indent) * 16)

  &[data-active]
    background-color: var(--tabs-activated-bg)
    border: var(--tabs-activated-border)
    box-shadow: var(--tabs-activated-shadow)
  
  &[data-loading="true"]
    cursor: progress

  &[data-selected]
  &[data-selected]:hover
  &[data-selected]:active
    z-index: 10
    background-color: var(--tabs-selected-bg)
    border: var(--tabs-selected-border)
    box-shadow: var(--tabs-selected-shadow)
  
  &[data-discarded] > .lvl-wrapper > .fav
  &[data-discarded] > .lvl-wrapper > .t-box
  &[data-discarded] > .lvl-wrapper > .ctx
    opacity: .56

// ---
// -- Level Wrapper
// -
.Tab .lvl-wrapper
  box(relative, flex)
  size(100%, same)
  align-items: center
  transition: opacity var(--d-fast), transform var(--d-fast)
  &:before
    content: ''
    box(absolute, none)
    size(3px, 3px)
    pos(calc(50% - 1px), -3px)
    border-radius: 50%
    background-color: var(--tabs-lvl-indicator-bg)
    opacity: .8

#root[data-tabs-tree-lvl-marks] .Tab .lvl-wrapper:before
  box(block)
  box-shadow: calc(var(--tabs-indent) * -1) 0 0 0 var(--tabs-lvl-indicator-bg),
              calc(var(--tabs-indent) * -2) 0 0 0 var(--tabs-lvl-indicator-bg),
              calc(var(--tabs-indent) * -3) 0 0 0 var(--tabs-lvl-indicator-bg),
              calc(var(--tabs-indent) * -4) 0 0 0 var(--tabs-lvl-indicator-bg),
              calc(var(--tabs-indent) * -5) 0 0 0 var(--tabs-lvl-indicator-bg),
              calc(var(--tabs-indent) * -6) 0 0 0 var(--tabs-lvl-indicator-bg),
              calc(var(--tabs-indent) * -7) 0 0 0 var(--tabs-lvl-indicator-bg),
              calc(var(--tabs-indent) * -8) 0 0 0 var(--tabs-lvl-indicator-bg),
              calc(var(--tabs-indent) * -9) 0 0 0 var(--tabs-lvl-indicator-bg),
              calc(var(--tabs-indent) * -10) 0 0 0 var(--tabs-lvl-indicator-bg),
              calc(var(--tabs-indent) * -11) 0 0 0 var(--tabs-lvl-indicator-bg),
              calc(var(--tabs-indent) * -12) 0 0 0 var(--tabs-lvl-indicator-bg),
              calc(var(--tabs-indent) * -13) 0 0 0 var(--tabs-lvl-indicator-bg),
              calc(var(--tabs-indent) * -14) 0 0 0 var(--tabs-lvl-indicator-bg),
              calc(var(--tabs-indent) * -15) 0 0 0 var(--tabs-lvl-indicator-bg)

// ---
// -- Drag layer
// -
.Tab .drag-layer
  box(absolute)
  size(100%, same)
  pos(0, 0)
  z-index: 15

// ---
// -- Audio
// -
.Tab .audio
  box(absolute)
  pos(0, 24px)
  size(16px, 100%)
  z-index: 1
  > svg
    box(absolute)
    pos(calc(50% - 5px), 6px)
    size(11px, same)
    fill: var(--title-fg)
    transition: opacity var(--d-fast)
    opacity: 0

.Tab[data-audible] .audio
.Tab[data-muted] .audio
  opacity: 1
  z-index: 20
  &:hover
    opacity: .7
  &:active
    opacity: .5

.Tab[data-audible]:not([data-muted]) svg.-loud
.Tab[data-muted] svg.-mute
  opacity: 1

// ---
// -- Favicon
// -
.Tab .fav
  box(relative)
  size(16px, same)
  flex-shrink: 0
  margin: 0 6px 0 7px
  opacity: 1
  z-index: 20
  transition: opacity var(--d-fast), transform var(--d-fast)
  &:after
    content: ''
    box(absolute)
    pos(b: -4px, l: -4px)
    size(0, 0)
    border-top: 2px solid transparent
    border-bottom: 2px solid var(--notice-fg)
    border-right: 2px solid transparent
    border-left: 2px solid var(--notice-fg)
    transition: opacity var(--d-fast)
    opacity: 0

.Tab:hover .fav
  opacity: .7

.Tab:active .fav
  transition: none
  opacity: .5

.Tab[data-unread] .fav
  &:after
    opacity: .8

// ---
// -- Favicon placeholder
// -
.Tab .placeholder
  box(absolute)
  size(16px, same)
  pos(0, 0)
  > svg
    box(absolute)
    size(100%, same)
    pos(0, 0)
    fill: var(--favicons-placeholder-bg)

.Tab[data-parent] .fav:hover .placeholder
.Tab[data-parent][data-folded] .fav .placeholder
  // Dim if combined with exp icon
  opacity: .5

.Tab[data-updated] .placeholder
.Tab[data-pending] .placeholder
  mask: radial-gradient(
    circle at calc(100% - 2px) calc(100% - 2px),
    #00000024,
    #00000024 4px,
    #000000 5px,
    #000000
  )

.Tab[data-loading] .placeholder
  mask: radial-gradient(
    circle at calc(100% - 2px) calc(100% - 2px),
    #00000024,
    #00000024 7px,
    #000000 8px,
    #000000
  )

// ---
// -- Favicon image
// -
.Tab .fav > img
  box(absolute)
  size(100%, same)

.Tab[data-parent] .fav:hover > img
.Tab[data-parent][data-folded] .fav > img
  // Dim if combined with exp icon
  opacity: .2

.Tab[data-updated] .fav > img
.Tab[data-pending] .fav > img
  mask: radial-gradient(
    circle at calc(100% - 2px) calc(100% - 2px),
    #00000024,
    #00000024 4px,
    #000000 5px,
    #000000
  )

.Tab[data-loading] .fav > img
    mask: radial-gradient(
      circle at calc(100% - 2px) calc(100% - 2px),
      #00000024,
      #00000024 7px,
      #000000 8px,
      #000000
    )

// ---
// -- Tabs group expand icon
// -
.Tab .exp
  box(absolute)
  size(calc(100% + 8px), same)
  pos(-4px, -4px)
  opacity: 0
  z-index: -1
  cursor: pointer
  transform: scale(0.5, 0.5)
  transition: opacity var(--d-fast), transform var(--d-fast)
  > svg
    box(absolute)
    pos(5px, same)
    size(14px, same)
    fill: var(--bookmarks-folder-expanded-fg)

.Tab[data-parent] .fav:hover .exp
  z-index: 1
  opacity: 1
  transform: scale(1, 1)

.Tab[data-parent][data-folded] .fav .exp
  z-index: 1
  opacity: 1
  transform: scale(1, 1) rotateZ(-90deg)

// ---
// -- Progress spinner
// -
.Tab .progress-spinner
  box(absolute, border-box)
  size(12px, same)
  pos(b: -4px, r: -4px)
  border-radius: 50%
  border-top: 2px solid var(--progress-fg)
  border-left: 2px solid var(--progress-bg)
  border-right: 2px solid var(--progress-bg)
  border-bottom: 2px solid var(--progress-bg)
  animation: progress-animation .5s infinite linear

// ---
// -- Update / highlight badge
// -
.Tab .update-badge
  box(absolute)
  size(6px, same)
  pos(b: -1px, r: -1px)
  border-radius: 50%
  background-color: var(--tabs-update-badge-bg)
  opacity: 0
  transform: scale(0.7, 0.7)
  transition: opacity var(--d-norm), transform var(--d-norm)

.Tab:not([data-loading])[data-updated] .update-badge
  opacity: 1
  transform: scale(1, 1)

.Tab:not([data-loading])[data-pending] .update-badge
  opacity: 1
  transform: scale(1, 1)
  background-color: var(--tabs-fg)

// ---
// -- Ok / Err badges
// -
.Tab .ok-badge
.Tab .err-badge
  box(absolute)
  size(12px, same)
  pos(b: -4px, r: -4px)
  border-radius: 50%
  > svg
    box(absolute)
    size(100%, same)

.Tab .ok-badge > svg
  fill: var(--true-fg)

.Tab .err-badge > svg
  fill: var(--false-fg)

// ---
// -- Count of descendants
// -
.Tab .fav > .child-count
  box(absolute)
  size(8px)
  pos(b: -5px, r: -3px)
  font: var(--tabs-count-font)
  text-align: center
  color: var(--tabs-fg)
  transition: opacity var(--d-fast)

.Tab[data-loading] .fav > .child-count
.Tab[data-pending] .fav > .child-count
  opacity: 0

// ---
// -- Complete animation
// -
.Tab .complete-fx
  box(absolute)
  size(100%, same)
  pos(0, 0)
  background-image: linear-gradient(90deg, #00000000, var(--tabs-loading-fg))
  opacity: 0
  transform: translateX(-100%)

// ---
// -- Title box
// -
.Tab .t-box
  box(relative)
  size(100%)
  transition: opacity var(--d-fast), transform var(--d-fast)
  overflow: hidden
  mask: linear-gradient(-90deg, transparent, #000000 12px, #000000)

#root[data-tabs-close-btn] .Tab:hover .t-box
  mask: linear-gradient(-90deg, transparent, transparent 24px, #000000 48px, #000000)

#root[data-tabs-close-btn] .Tab[data-audible]:hover .t-box
#root[data-tabs-close-btn] .Tab[data-muted]:hover .t-box
  mask: linear-gradient(-90deg, transparent, transparent 42px, #000000 64px, #000000)

.Tab[data-audible] .t-box
.Tab[data-muted] .t-box
  transform: translateX(16px)
  mask: linear-gradient(-90deg, transparent, transparent 16px, #000000 28px, #000000)

// ---
// -- Title
// -
.Tab .title
  box(relative)
  font: var(--tabs-font)
  color: var(--tabs-fg)
  padding: 0 1px
  white-space: nowrap
  overflow: hidden
  transition: color var(--d-fast)

.Tab[data-active] .title
  color: var(--tabs-activated-fg)

.Tab:hover .title
  color: var(--tabs-fg-hover)

.Tab[data-selected] .title
  color: var(--tabs-selected-fg)

// ---
// -- Container highlight
// -
.Tab .ctx
  box(absolute)
  pos(4px, r: 0)
  size(2px, calc(100% - 8px))
  z-index: 2000
  box-shadow: inset -1px 0 0 0 #00000032
  background-color: var(--container-fg)

// ---
// -- Close button
// -
.Tab .close
  box(absolute)
  pos(0, r: 0)
  size(31px)
  height: var(--tabs-height)
  cursor: pointer
  z-index: 20
  opacity: 0
  &:hover > svg
    fill: #ea4335
  > svg
    box(absolute)
    pos(calc(50% - 8px), same)
    size(17px, same)
    fill: #a63626
    transition: fill var(--d-fast)

.Tab:hover .close
  opacity: 1

// ---
// -- Transitions
// -
.tab-enter-active
.tab-leave-active
  transition: transform var(--d-fast), opacity var(--d-fast), padding var(--d-fast), z-index var(--d-fast)
.tab-leave-active
  box(absolute)
.tab-move
  transition: transform var(--d-fast), opacity var(--d-fast), padding var(--d-fast)
.tab-enter
  opacity: 0
  transform: translateY(-50%)
  z-index: 0
.tab-leave
  opacity: 0
  transform: scale(1, 1)
.tab-leave-to
  opacity: 0
  z-index: 0
  transform: translateY(-8px)

.tab-part-enter-active
.tab-part-leave-active
  transition: transform var(--d-fast), opacity var(--d-fast)
.tab-part-enter
  opacity: 0
  transform: scale(0.5, 0.5)
.tab-part-enter-to
  opacity: 1
  transform: scale(1, 1)
.tab-part-leave
  opacity: 1
  transform: scale(1, 1)
.tab-part-leave-to
  opacity: 0
  transform: scale(0.5, 0.5)

.tab-complete-leave-to
  animation: complete-animation .4s
